<template>
  <div class="container">
    <button :type="type"
      :id="id"
      :class="[colorClass]"
      @click="$emit('click', 1111)"
    >{{info}}</button>
  </div>
</template>

<script>
export default {
  name: "el-input",
  props: ["info", "id", "colorType", "type"],
  data() {
    return {
      uuid: "w-" + Math.floor(Math.random() * 16777215).toString(16),
      type: this.type || "button",
      id: this.id || this.uuid,
    };
  },
  created() {
    if (this.colorType === "primary") {
      this.colorClass = "primary";
    } else if (this.colorType === "success") {
      this.colorClass = "success";
    } else if (this.colorType === "info") {
      this.colorClass = "info";
    } else if (this.colorType === "warning") {
      this.colorClass = "warning";
    } else if (this.colorType === "danger") {
      this.colorClass = "danger";
    } else {
      this.colorClass = "info";
    }
  },
};
</script>

<style scoped>
.test {
  color: #f56c6c;
}
.test2 {
  font-size: 55px;
}
.container {
  width: 80px;
  height: 30px;
  margin: 1%;
  padding: 0;
  border: 1px solid #eee;
  display: inline-block;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 7%;
  font-size: 100%;
  font-family: "微软雅黑";
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  font-size: 110%;
  font-family: "微软雅黑";
  cursor: pointer;
  color: #fff;
}
.primary {
  background-color: #409eff;
}
.success {
  background-color: #67c23a;
}
.info {
  background-color: #909399;
}
.warning {
  background-color: #e6a23c;
}
.danger {
  background-color: #f56c6c;
}
</style>